<template>
  <div class="allOrder">
    <div class="head">
      <div class="navBar">

          <div class="name_input">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="姓名">
                  <el-input v-model="formInline.user" placeholder="输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                  <el-input v-model="formInline.company" placeholder="输入单位"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" type @click="chaxun">查询</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="reset"><i class="el-icon-refresh-right">重置</i></el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="exportCurrent()"><i class="el-icon-download">导出数据到Excel</i></el-button>
                </el-form-item>
              </el-form>
            </div>
        <div class="orderDate">
          <div class="block">
            <span class="demonstration">订单日期</span>
            <el-date-picker
              v-model="value6"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="head-type">
        <div class="agency-type">
          <div class="type-name">类型</div>
          <div class="radiogroup">
            <el-radio-group v-model="radio2">
              <span @click="Choose_type(1)"
                ><el-radio :label="3">全部</el-radio></span
              >
              <span @click="Choose_type(2)"
                ><el-radio :label="6">大客户</el-radio></span
              >
              <span @click="Choose_type(3)"
                ><el-radio :label="9">合伙人</el-radio></span
              >
            </el-radio-group>
          </div>
        </div>
        <div class="agency-type-card-type">
          <span>卡类型</span>
          <el-radio-group v-model="radio3">
            <span @click="Choose_card_type(1)"
              ><el-radio :label="3">全部</el-radio></span
            >
            <span @click="Choose_card_type(2)"
              ><el-radio :label="6">实体卡</el-radio></span
            >
            <span @click="Choose_card_type(3)"
              ><el-radio :label="9">虚拟卡</el-radio></span
            >
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="orderList">
      <el-table
        :data="
          newList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%"
      >
        <el-table-column fixed prop="order_number" label="订单编号" width="150">
        </el-table-column>
        <el-table-column prop="order_quantity" label="订单数量" width="120">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="120">
        </el-table-column>
        <el-table-column prop="company" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="300">
        </el-table-column>
        <el-table-column prop="product_name" label="产品名称" width="120">
        </el-table-column>
        <el-table-column prop="zip" label="单价" width="120"> </el-table-column>
        <el-table-column prop="zip" label="支付金额" width="120">
        </el-table-column>
        <el-table-column prop="pay_method" label="支付方式" width="120">
        </el-table-column>
        <el-table-column prop="pay_date" label="支付时间" width="120">
        </el-table-column>
        <el-table-column prop="pay_status" label="支付状态" width="120">
        </el-table-column>
        <el-table-column prop="card_type" label="卡类" width="120">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120">
        </el-table-column>
      </el-table>
    </div>
    <div class="pagetations">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 8]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="newList.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    exportCurrent: function() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable")); //表格id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheet.xlsx"
        ); //文件名
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    chaxun() {
      var y = this.formInline.user;
      console.log(this.formInline.user)
      this.newList = this.tableData.filter(function (x) {
        return x.name == y;
      });
    },
    onSubmit() {
        console.log('submit!');
    },
    reset(){
      console.log('reset')
    },
    //下面两个函数应该写成两个参数的一个函数根据输入的参数[0,1],[0,2],[0,3],[1,0],[1,1],[1,2],[2,0],[2,1],[2,2]来渲染出现的表格
    Choose_type(type) {
      switch (type) {
        case 1:
          this.newList = this.tableData;
          break;
        case 2:
          this.newList = this.tableData.filter((item) => item.type == "大客户");
          break;
        case 3:
          this.newList = this.tableData.filter((item) => item.type == "合伙人");
          break;
      }
    },
    Choose_card_type(type) {
      switch (type) {
        case 1:
          this.newList = this.tableData;
          break;
        case 2:
          this.newList = this.tableData.filter((item) => item.type == "实体卡");
          break;
        case 3:
          this.newList = this.tableData.filter((item) => item.type == "虚拟卡");
          break;
      }
    },
  },
  mounted() {
    this.axios
      .post("http://47.108.201.43:3000/api/getOrderStatus")
      .then((res) => {
        this.tableData = res.data.res;
      });
  },
  data() {
    return {
      input: "",
      value6: "",
      radio2: 1,
      radio3: 1,
      tableData: [],
      currentPage: 1,
      pagesize: 4,
      newList: [],
      formInline: {
          user: '',
          company: ''
        },
    };
  },
};
</script>
